<template>
  <div class="approval-read-record">
    <div class="detail-react-title">
      <el-button
        :class="[isFocus ? 'active disposal' : '']"
        size="medium"
        type="text"
        style="padding-bottom: 4.3px"
        >审批记录</el-button
      >
    </div>
    <div class="detail-react-timeline-read">
      <!--审批记录-->
      <div class="detail-react-timeline" v-if="isFocus">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in timelineData"
            placement="top"
            :key="index"
            :timestamp="activity.operTimeString"
            :icon="activity.icon"
            :color="activity.color"
          >
            <div class="detail-react-timeline-info ccui-clearfix">
              <div
                class="detail-react-timeline-info-avatar"
                v-if="activity.operatorIconLink !== ''"
              >
                <img :src="activity.operatorIconLink" />
              </div>
              <div class="detail-react-timeline-info-avatar" v-else>
                <i
                  class="icon-ccui-woman-avatar"
                  v-if="activity.operatorSex === '2'"
                ></i>
                <i class="icon-ccui-user" v-else></i>
              </div>
              <div class="detail-react-timeline-info-content">
                <div>
                  <span :title="activity.operatorName">
                    {{ activity.operatorName | overstep }}
                  </span>
                  <span
                    v-if="activity.operResultType === 1"
                    class="detail-react-timeline-info-apply"
                  >
                    {{
                      activity.operResultName
                        ? `（${activity.operResultName}）`
                        : ""
                    }}
                  </span>
                </div>
              </div>
              <div class="detail-react-timeline-info-enterprise">
                {{ activity.joinOrgName }}
              </div>
            </div>
            <template v-if="activity.operState === 1">
              <p
                v-if="activity.operResultType === 1"
                class="detail-react-timeline-content"
                style="display: flex"
              >
                <span class="detail-react-timeline-content-label">说明:</span>
                <span
                  :class="[isReadClass]"
                  class="detail-react-timeline-content-text"
                  >{{ activity.operOpinion }}</span
                >
              </p>
              <template v-else>
                <p class="detail-react-timeline-content" style="display: flex">
                  <span class="detail-react-timeline-content-label">结论:</span>
                  <span
                    :style="{ color: operResultColor[activity.operResultType] }"
                    class="detail-react-timeline-content-text"
                    :class="[isReadClass]"
                    >{{ activity.operResultName }}</span
                  >
                </p>
                <p class="detail-react-timeline-content" style="display: flex">
                  <span class="detail-react-timeline-content-label">意见:</span>
                  <span
                    class="detail-react-timeline-content-text"
                    :class="[isReadClass]"
                    >{{ activity.operOpinion }}</span
                  >
                </p>
              </template>
            </template>
            <p
              v-else
              class="detail-react-timeline-content detail-react-timeline-ml"
            >
              审批中...
            </p>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
/**
 *   "审批记录"与"阅读记录"组件
 */
export default {
  name: "approvalRecord",
  props: {
    // 审批记录数据
    approvalRecordData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      // 审批记录与阅读记录的选中状态
      isFocus: true,
      // 审批记录字体颜色
      operResultColor: {
        2: "#009588",
        4: "#D5090B"
      },
      isReadClass: "readClass",
      timelineData: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.approvalRecordData.forEach((item, index) => {
        if (!item.operState) {
          item.icon = "el-icon-time";
          item.color = "#F5A623";
        }
        if (item.operState && this.approvalRecordData.length - 1 === index) {
          item.icon = "el-icon-success";
          item.color = "#0089EF";
        }
      });
      this.timelineData = this.approvalRecordData;
    }
  },
  filters: {
    overstep(value) {
      return value.length <= 5 ? value : value.substr(0, 5) + "...";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/config/styles/variables";
.approval-read-record {
  width: 380px;
  float: left;
  margin-left: 18px;
  // margin-top: 15px;
  background: #fff;

  .detail-react-title {
    margin: 20px 20px 0;

    .el-button--medium {
      padding: 0 0 3px 0;
      font-size: 14px;
      color: #9b9b9b;

      &.active {
        color: $--color-rest;
        border-bottom: 2px solid $--color-rest;
        border-radius: 0;
        font-weight: 600;
        font-size: 14px;
      }
    }

    .processed {
      margin-left: 23px;
    }
  }

  .detail-react-timeline-read {
    /deep/ .opinionSize {
      margin-top: 0 !important;
    }

    .detail-react-read {
      padding: 20px;
    }

    .detail-react-timeline {
      padding: 20px;

      /deep/ .el-timeline-item {
        &:not(:last-child) {
          padding-bottom: 40px;
        }

        &:last-child {
          padding-bottom: 0px;
        }

        .el-timeline-item__timestamp {
          position: absolute;
          right: 0;
          font-size: 12px;
        }

        .el-timeline-item__tail {
          top: 5px;
        }

        .el-timeline-item__node {
          top: 5px;
        }

        .el-timeline-item__icon {
          font-size: 15px;
          &.el-icon-success {
            color: #67c23a;
            background-color: #fff;
          }
        }
      }

      .detail-react-timeline-info {
        .detail-react-timeline-info-avatar {
          width: 30px;
          height: 30px;
          background-color: #5daaff;
          border-radius: 50%;
          float: left;
          margin-right: 7px;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }

          i {
            font-size: 26px;
            color: #fff;
            position: absolute;
            left: 2.3px;
            bottom: -1px;
          }
        }

        .detail-react-timeline-info-content {
          font-size: 13px;
          font-weight: 500;
          padding-right: 120px;

          .detail-react-timeline-info-apply {
            margin-left: 6px;
            color: #9b9b9b;
          }
        }

        .detail-react-timeline-info-enterprise {
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #9b9b9b;
          line-height: 17px;
        }
      }

      .detail-react-timeline-content {
        margin-top: 6px;
        font-size: 13px;

        &.detail-react-timeline-ml {
          margin-left: 37px;
        }

        .detail-react-timeline-content-label {
          width: 32px;
          color: #9b9b9b;
          margin-right: 7px;
        }
      }

      .detail-react-timeline-content-text {
        word-break: break-all;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
      }
    }
  }
}

.readClass {
  display: block;
  word-break: break-all;
  width: 275px;
}
</style>
